window.onload = function () {
    var containter = document.querySelector("#container");
    var canvas = document.createElement("canvas");
    canvas.height = containter.clientHeight;
    canvas.width = containter.clientWidth;
    containter.appendChild(canvas);
    var gl = canvas.getContext("webgl");
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    var VERTEX_SHADER_SOURCE =
        "attribute vec4 a_Position;\n" +
        "void main(){" +
        "gl_Position = a_Position;" +
        "gl_PointSize = 10.0;" +
        "}";

    var FRAGMENT_SHADER_SOURCE =
        "void main(){" +
        "gl_FragColor = vec4(1.0,1.0,1.0,1.0);" +
        "}";
    var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
    var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);

    gl.compileShader(vertex_shader_object);
    gl.compileShader(fragment_shader_object);

    var program = gl.createProgram();

    gl.attachShader(program, vertex_shader_object);
    gl.attachShader(program, fragment_shader_object);

    gl.linkProgram(program);
    gl.useProgram(program);

    canvas.onclick = function (e) {
        clientX = e.clientX;
        clientY = e.clientY;
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        var x = (clientX - canvas.width / 2) / (canvas.width / 2);
        var y = (canvas.height / 2 - clientY) / (canvas.height / 2);
        var a_Psition = gl.getAttribLocation(program, 'a_Position');
        gl.vertexAttrib3f(a_Psition, x, y, 0.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    };
}